<template>
	<view>
		<view class="p15 mt15 bg-white brs10">

			<view class="u-flex u-f-jsb fz14 bm pb15">
				姓名
				<input placeholder="请输入姓名" v-model="form.name" type="text" style="text-align: right;" />
			</view>
			<view class="u-flex u-f-jsb fz14 mt15 bm pb15">
				联系电话
				<input placeholder="请输入联系电话" v-model="form.mobile" type="text" style="text-align: right;" />
			</view>
			
			
			<view class="u-flex u-f-jsb fz14 mt15 bm pb15" @click="showThreePicker">
				所在地区
				<view class="in">
					<view class="areaPicker flex">
						<view class="placeholder">
							<text>{{form.areaName}}</text>
						</view>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
					<area-picker ref="areaPicker" v-model="show" :areaId="form.areaId"
						:defaultIndex="defaultIndex" @onConfirm="onConfirm" class="fsz26"></area-picker>
				</view>
			</view>
			<view class="fz14 mt15 pb15">
				详情地址
				<input style="padding: 0;width: 100%;" class="mt10" placeholder="请填写具体地址" v-model="form.detailAddress" type="text" />
			</view>
			<view>
				<!-- <u-checkbox-group>
					<u-checkbox shape="circle" v-model="checked">设为默认</u-checkbox>
				</u-checkbox-group> -->
			</view>
		</view>
		<view class="fixed-bottom module-btn">
			<button type="primary" @click="del" style="color:#70B52C ;border: 1px solid #70B52C;background: none;" class="btn">删除当前地址</button>
			<button type="primary" @click="save" style="background: #70B52C;" class="btn mt15">保存</button>
		</view>

		<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
			:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				defaultIndex: [0, 0, 0],
				show: false,
				navTitle: "添加地址",
				form: {
					id: "",
					name: "",
					mobile: "",
					areaId: 110101,
					areaName: '北京市 北京市 东城区',
					detailAddress: "",
					defaultStatus: true
				}
			}
		},
		onLoad(options) {

			var that = this;
			if (options.id) {
				that.form.id = options.id;
				that.navTitle = "修改收货地址";
				that.getInfo();
			}
		},
		computed: {},
		methods: {

			// 省市区联动初始化
			showThreePicker() {
				this.show = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.form.areaName = e[0].name + " " + e[1].name
				this.form.areaId = e[1].id
				if (e[2].name) {
					this.form.areaName = e[0].name + " " + e[1].name + " " + e[2].name
					this.form.areaId = e[2].id
				}
			},
			getInfo: function() {

				this.$api.addressGet({
					id: this.form.id
				}, res => {
					if (res.code == 200) {
						this.form = res.data
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			del: function() { //删除

				this.$common.modelShow('提示', '确认删除该地址吗?', () => {

					this.$api.addressDelete({
						id: this.form.id
					}, res => {
						if (res.code == 200) {
							uni.navigateBack()

							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
						} else {

							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				});
			},
			save: function() {
				//保存
				let api = 'addressCreate'
				if (this.form.id) {
					api = 'addressUpdate'
				}
				this.$api[api](this.form, res => {
					if (res.code == 200) {
						uni.navigateBack()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						});
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		mounted() {

		}
	}
</script>

<style>
.btn{
	border-radius: 16rpx;
}
</style>